<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            //提示信息
            var lang = {
                "sProcessing": "处理中...",
                "sLengthMenu": "每页 _MENU_ 项",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
                "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页",
                    "sJump": "跳转"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            };
            var page_size = 1

            var table = $('#example').DataTable({
                language: lang,  //提示信息
                // autoWidth: false,  //禁用自动调整列宽
                // stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
                // processing: true,  //隐藏加载提示,自行处理
                // serverSide: true,  //启用服务器端分页
                // searching: false,  //禁用原生搜索
                // orderMulti: false,  //启用多列排序
                // order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
                // renderer: "jquery-ui",  //渲染样式：Bootstrap和jquery-ui
                // pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
                "iDisplayLength": 1,
                // data: data,
                // "drawCallback": function (settings) {
                //     var api = new $.fn.dataTable.Api(settings);

                //     // Output the data for the visible rows to the browser's console
                //     // You might do something more useful with it!
                //     console.log(api.rows({ page: 'current' }).data());
                // },
                ajax: function (data, callback, settings) {
                    //封装请求参数
                    console.log(data);
                    var param = {};//调用方法获取页面查询条件，已经分页所需要的数据
                    param.page = data.page
                    param.page_size = page_size
                    param.search_key = $("#search_key").val()
                    console.log(param);
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "http://127.0.0.1:7600/datatables-backend/v1/datatables/test/",
                        cache: false,  //禁用缓存
                        data: param,  //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            console.log(result);
                            //setTimeout仅为测试延迟效果
                            setTimeout(function () {
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = result.total;//返回数据全部记录
                                returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = result.data;//返回的数据列表
                                //console.log(returnData);
                                //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(result);
                            }, 200);
                        }
                    });
                },
            });
            table
                .on('order', function () {
                    console.log("order");
                })
                .on('search', function () {
                    console.log("search");
                })
                .on('page', function () {
                    console.log("page");
                }).on('page.dt', function () {
                    console.log("page.dt")
                });

                
        });
    </script>
</body>

</html>